1 септември 2025 г.Български

Разгледайте hook-а useActionState в React за оптимизирано управление на състоянието, задействано от асинхронни действия. Подобрете ефективността и потребителското изживяване на вашето приложение.

Имплементация на useActionState в React: Управление на състоянието, базирано на действия

Hook-ът useActionState на React, представен в последните версии, предлага усъвършенстван подход за управление на актуализациите на състоянието, произтичащи от асинхронни действия. Този мощен инструмент оптимизира процеса на обработка на мутации, актуализиране на потребителския интерфейс и управление на състояния на грешки, особено при работа с React Server Components (RSC) и сървърни действия. Това ръководство ще разгледа тънкостите на useActionState, като предостави практически примери и най-добри практики за имплементация.

Разбиране на нуждата от управление на състоянието, базирано на действия

Традиционното управление на състоянието в React често включва отделно управление на състоянията за зареждане и грешки в компонентите. Когато дадено действие (напр. изпращане на форма, извличане на данни) задейства актуализация на състоянието, разработчиците обикновено управляват тези състояния с множество извиквания на useState и потенциално сложна условна логика. useActionState предоставя по-чисто и по-интегрирано решение.

Разгледайте прост сценарий за изпращане на форма. Без useActionState, може да имате:

Променлива за състоянието на данните от формата.
Променлива за състоянието, която да следи дали формата се изпраща (състояние на зареждане).
Променлива за състоянието, която да съхранява всякакви съобщения за грешки.

Този подход може да доведе до многословен код и потенциални несъответствия. useActionState обединява тези аспекти в един единствен hook, опростявайки логиката и подобрявайки четимостта на кода.

Представяне на useActionState

Hook-ът useActionState приема два аргумента:

Асинхронна функция ("действието"), която извършва актуализацията на състоянието. Това може да бъде сървърно действие или всяка асинхронна функция.
Начална стойност на състоянието.

Той връща масив, съдържащ два елемента:

Текущата стойност на състоянието.
Функция за изпращане на действието. Тази функция автоматично управлява състоянията на зареждане и грешки, свързани с действието.

Ето един основен пример:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // Simulate an asynchronous server update.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Failed to update server.';
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

В този пример:

updateServer е асинхронното действие, което симулира актуализация на сървър. То получава предишното състояние и данните от формата.
useActionState инициализира състоянието с 'Initial State' и връща текущото състояние и функцията dispatch.
Функцията handleSubmit извиква dispatch с данните от формата. useActionState автоматично обработва състоянията на зареждане и грешки по време на изпълнение на действието.

Обработка на състояния на зареждане и грешки

Едно от ключовите предимства на useActionState е вграденото управление на състоянията на зареждане и грешки. Функцията dispatch връща promise, който се разрешава с резултата от действието. Ако действието хвърли грешка, promise-ът се отхвърля с грешката. Можете да използвате това, за да актуализирате потребителския интерфейс съответно.

Променете предишния пример, за да покажете съобщение за зареждане и съобщение за грешка:


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Simulate an asynchronous server update.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Error during submission:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Name:
      
      
      {isSubmitting && Loading...}
      {errorMessage && Error: {errorMessage}}
      State: {state}
    
  );
}

Ключови промени:

Добавихме променливи на състоянието isSubmitting и errorMessage, за да следим състоянията на зареждане и грешки.
В handleSubmit задаваме isSubmitting на true преди да извикаме dispatch и улавяме всякакви грешки, за да актуализираме errorMessage.
Деактивираме бутона за изпращане по време на подаване и показваме съобщенията за зареждане и грешки условно.

useActionState със сървърни действия в React Server Components (RSC)

useActionState блести, когато се използва с React Server Components (RSC) и сървърни действия. Сървърните действия са функции, които се изпълняват на сървъра и могат директно да променят източници на данни. Те ви позволяват да извършвате операции от страна на сървъра, без да пишете API ендпойнти.

Забележка: Този пример изисква React среда, конфигурирана за Server Components и Server Actions.


// app/actions.js (Server Action)
'use server';

import { cookies } from 'next/headers'; //Example, for Next.js

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Please enter a name.';
  }

  try {
    // Simulate database update.
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Updated name to: ${name}`; //Success!

  } catch (error) {
    console.error("Database update failed:", error);
    return 'Failed to update name.'; // Important: Return a message, not throw an Error
  }
}


// app/page.jsx (React Server Component)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

export default MyComponent;

В този пример:

updateName е сървърно действие, дефинирано в app/actions.js. То получава предишното състояние и данните от формата, актуализира базата данни (симулирано) и връща съобщение за успех или грешка. Ключово е, че действието връща съобщение, вместо да хвърля грешка. Сървърните действия предпочитат връщането на информативни съобщения.
Компонентът е маркиран като клиентски компонент ('use client'), за да се използва hook-ът useActionState.
Функцията handleSubmit извиква dispatch с данните от формата. useActionState автоматично управлява актуализацията на състоянието въз основа на резултата от сървърното действие.

Важни съображения за сървърните действия

Обработка на грешки в сървърните действия: Вместо да хвърляте грешки, върнете смислено съобщение за грешка от вашето сървърно действие. useActionState ще третира това съобщение като новото състояние. Това позволява елегантна обработка на грешки от страна на клиента.
Оптимистични обновления: Сървърните действия могат да се използват с оптимистични обновления, за да се подобри възприеманата производителност. Можете да актуализирате потребителския интерфейс незабавно и да го върнете в предишното състояние, ако действието се провали.
Ревалидация: След успешна мутация, обмислете ревалидиране на кешираните данни, за да се уверите, че потребителският интерфейс отразява най-новото състояние.

Напреднали техники с useActionState

1. Използване на Reducer за сложни актуализации на състоянието

За по-сложна логика на състоянието можете да комбинирате useActionState с reducer функция. Това ви позволява да управлявате актуализациите на състоянието по предвидим и поддържан начин.


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'Initial State',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // Simulate asynchronous operation.
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Count: {state.count}
      Message: {state.message}
      
      
      
    
  );
}

2. Оптимистични обновления с useActionState

Оптимистичните обновления подобряват потребителското изживяване, като незабавно актуализират потребителския интерфейс, сякаш действието е било успешно, и след това връщат промяната, ако действието се провали. Това може да направи вашето приложение да се усеща по-отзивчиво.


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Simulate an asynchronous server update.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Initial Name');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // Update on success
    } catch (error) {
      // Revert on error
      console.error("Update failed:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // Optimistically update UI
    await dispatch(newName);
  }

  return (
    
      Name:
      
      
      Current Name: {name}
      State: {state}
    
  );
}

3. Debouncing на действия

В някои сценарии може да искате да използвате debounce за действията, за да предотвратите твърде честото им изпращане. Това може да бъде полезно за сценарии като полета за търсене, където искате да задействате действие само след като потребителят е спрял да пише за определен период.


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // Simulate asynchronous search.
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Search results for: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Initial State');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // Debounce for 300ms

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Search:
       setQuery(e.target.value)}
      />
      State: {state}
    
  );
}

Най-добри практики за useActionState

Поддържайте действията чисти: Уверете се, че вашите действия са чисти функции (или възможно най-близо до това). Те не трябва да имат странични ефекти, освен актуализиране на състоянието.
Обработвайте грешките елегантно: Винаги обработвайте грешките във вашите действия и предоставяйте информативни съобщения за грешки на потребителя. Както беше отбелязано по-горе за сървърните действия, предпочитайте връщането на низ със съобщение за грешка от сървърното действие, вместо да хвърляте грешка.
Оптимизирайте производителността: Бъдете наясно с последиците за производителността на вашите действия, особено когато работите с големи набори от данни. Обмислете използването на техники за мемоизация, за да избегнете ненужни прерисувания.
Обмислете достъпността: Уверете се, че вашето приложение остава достъпно за всички потребители, включително тези с увреждания. Осигурете подходящи ARIA атрибути и навигация с клавиатура.
Обстойно тестване: Пишете единични и интеграционни тестове, за да се уверите, че вашите действия и актуализации на състоянието работят правилно.
Интернационализация (i18n): За глобални приложения, имплементирайте i18n, за да поддържате множество езици и култури.
Локализация (l10n): Приспособете вашето приложение към конкретни локали, като предоставяте локализирано съдържание, формати на дати и символи на валути.

useActionState срещу други решения за управление на състоянието

Въпреки че useActionState предоставя удобен начин за управление на актуализации на състоянието, базирани на действия, той не е заместител на всички решения за управление на състоянието. За сложни приложения с глобално състояние, което трябва да се споделя между множество компоненти, библиотеки като Redux, Zustand или Jotai може да са по-подходящи.

Кога да използвате useActionState:

Актуализации на състоянието с проста до умерена сложност.
Актуализации на състоянието, тясно свързани с асинхронни действия.
Интеграция с React Server Components и сървърни действия.

Кога да обмислите други решения:

Сложно управление на глобално състояние.
Състояние, което трябва да се споделя между голям брой компоненти.
Разширени функции като time-travel debugging или middleware.

Заключение

Hook-ът useActionState на React предлага мощен и елегантен начин за управление на актуализации на състоянието, задействани от асинхронни действия. Чрез консолидиране на състоянията на зареждане и грешки, той опростява кода и подобрява четимостта, особено при работа с React Server Components и сървърни действия. Разбирането на неговите силни и слаби страни ви позволява да изберете правилния подход за управление на състоянието за вашето приложение, което води до по-поддържан и ефективен код.

Следвайки най-добрите практики, очертани в това ръководство, можете ефективно да използвате useActionState, за да подобрите потребителското изживяване и работния процес на разработка на вашето приложение. Не забравяйте да вземете предвид сложността на вашето приложение и да изберете решението за управление на състоянието, което най-добре отговаря на вашите нужди. От прости изпращания на форми до сложни мутации на данни, useActionState може да бъде ценен инструмент във вашия арсенал за разработка на React.